<template>
  <view>
    <view class="info-box" :class="{ 'bd-top': index > 0, 'bd-top-rad': index == 0 }" :key="item.id"
      v-for="(item, index) in  orderDeta ">
      <view class="order_info" @click="onClickGoods(item.goods_id)">
        <view class="img_box">
          <image class="img" mode="aspectFill" :src="item.img"></image>
        </view>
        <view class="content_box">
          <text class="iconfont2 icon-yilingqu1"
            v-if="(item.post_service == 3 || item.post_service == 4) && item.state == 1"></text>
          <text class="iconfont2 icon-yiqianshou" v-if="(item.post_service == 5 || item.post_service == 1) &&
            PostInfo[index]
            "></text>
          <view class="title">{{ item.shop_title }}</view>
          <view class="price-box">
            <view class="price" v-if="item.prepaid_price && item.prepaid_price > 0">订金￥{{ item.prepaid_price | moneyShow
            }}
            </view>
            <view class="price" v-else>￥{{ item.price | moneyShow }}</view>
          </view>
          <!-- <view class="car">合适车型：{{ item.ve_id }}</view> -->
          <view class="car">合适车型：{{ showCar(item.ve_id) }}</view>
          <view class="content_box_info">
            <view class="serice">
              {{ item.post_service == 4 ? '卡券礼包' : '实体物品' }}</view>
            <view class="serice" v-if="item.post_service == 1"> 包邮</view>
            <view class="serice" v-if="item.post_service == 3"> 到店领取</view>
            <view class="serice" v-if="item.state == 5"> 已退款</view>
            <view class="num">X {{ item.num }}</view>
          </view>
          <view class="server-r" v-if="item.state == 4"> 退款中</view>
          <view class="server-r" v-if="item.state == 6"> 线下已付</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { goodsCarListApi } from '@/API/Shop'
import { mapState, mapMutations, } from 'vuex'
export default {
  name: 'OrderItem',
  props: {
    orderDeta: {
      type: Array,
      default() {
        return []
      }
    }
  },
  onLoad(options) {
    if (!this.carModelDataList.length) {
      let { brand_id } = this.brandInfo
      // 车型数据
      this.getGoodsCarList(brand_id)
    }
  },
  computed: {
    ...mapState(['centers', 'brandInfo', 'loginInfo', 'carModelDataList',]),

  },
  methods: {
    ...mapMutations(['saveCarModelDataList']),
    // 到商品详情页
    onClickGoods(id) {
      uni.navigateTo({
        url: `/Shop/GoodsDetail?id=${id}`
      })
    },
    // 显示车型
    showCar(carId) {
      if (!carId) return ''
      let carModelList = this.carModelDataList
      if (!carModelList.length) return ''
      let Arr = carId.split(',')
      let tempArr = []
      for (let i = 0; i < Arr.length; i++) {
        for (let j = 0; j < carModelList.length; j++) {
          if (Arr[i] == carModelList[j].vem_vid) {
            tempArr.push(carModelList[j].vem_name)
            break
          }
        }
      }
      return tempArr.join(' , ')
    },
    // 商品车型列表
    async getGoodsCarList(brand_id) {
      const {
        data: { data }
      } = await goodsCarListApi({ brand_id })
      this.saveCarModelDataList(data)
    },
  }
}
</script>

<style lang='scss' scoped>
@import '@/styles/mixins.scss';

.info-box {
  width: 92%;
  padding: 10rpx 30rpx;
  margin: 0rpx auto;
  background-color: #fff;
}

.bd-top {
  border-top: #eee 1px solid;
}

.bd-top-rad {
  border-top-left-radius: 15rpx;
  border-top-right-radius: 15rpx;
}

.order_info {
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin-top: 10rpx;
  margin-bottom: 10rpx;

  .content_box {
    flex: 1;
    padding-left: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
    position: relative;

    .iconfont2 {
      font-size: 90rpx;
      position: absolute;
      top: 0rpx;
      right: 1rpx;
      color: #19b927;
    }

    .title {
      width: 100%;
      font-size: 30rpx;
      color: #222;
      font-weight: bold;
      @include text-ellipsis();
    }

    .price-box {
      .price {
        font-size: 28rpx;
        font-weight: bold;
        color: $theme-color;
      }
    }

    .car {
      font-size: 24rpx;
    }

    .content_box_info {
      width: 100%;
      display: flex;

      .serice {
        border: solid 1px $theme-color;
        border-radius: 8rpx;
        color: $theme-color;
        padding: 0rpx 6rpx;
        font-size: 20rpx;
        margin-right: 10rpx;
      }

      .num {
        margin-left: auto;
        font-size: 24rpx;
      }
    }

    .server-r {
      font-size: 20rpx;
      margin-left: auto;
      color: #e6a23c;
    }
  }

  .img_box {
    width: 160rpx;
    height: 160rpx;
    border-radius: 12rpx;
    overflow: hidden;

    .img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>